
$(function () {
    // 小区域/小图=大区域/大图
    $(".middleArea").css({
        width: $(".bigArea").width() / $(".bigImg").width() * $(".middleImg").width(),
        height: $(".bigArea").height() / $(".bigImg").height() * $(".middleImg").height()
    })
    $(".middleImg").on("mouseenter", function () {
        $(".middleArea").show()
        $(".bigArea").show()
    }).on("mouseleave", function () {
        $(".middleArea").hide()
        $(".bigArea").hide()
    })
    // 让小区域在小图中移动
    $(".middleImg").on("mousemove", function (e) {
        var mX = e.pageX - $(".middleImg").offset().left - $(".middleArea").width() / 2
        var mY = e.pageY - $(".middleImg").offset().top - $(".middleArea").height() / 2
        if (mX <= 0) {
            mX = 0
        }
        if (mY <= 0) {
            mY = 0
        }
        if (mX >= $(".middleImg").width() - $(".middleArea").width()) {
            mX = $(".middleImg").width() - $(".middleArea").width()
        }
        if (mY >= $(".middleImg").height() - $(".middleArea").height()) {
            mY = $(".middleImg").height() - $(".middleArea").height()
        }
        $(".middleArea").css({
            left: mX,
            top: mY
        })
        var bili = $(".bigArea").width() / $(".middleArea").width()

        $(".bigImg").css({
            left: bili * -mX,
            top: bili * -mY
        })
    })
    // 箭头滑动的图
    let imgindex = 0
    let self = this
    $(this).find(".i-mid>.arrowleft").on("click", function () {
        imgindex--
        if (imgindex < 0) {
            imgindex = 0
        }
        $(".point-img").animate({
            left: 20
        })
    })
    $(this).find(".i-mid>.arrowright").on("click", function () {
        imgindex++
        if (imgindex > 6) {
            imgindex = 6
        }
        $(".point-img").animate({
            left: -58
        })
    })

    // 点击切换图片
    $(".point-img > li").on("click", function () {
        var index = $(this).index()
        console.log(index);
        $(".middleImg").children().eq(0).attr("src", `./images/index2-topimg${index + 1}.jpg`)
        $(".bigImg").eq(0).attr("src", `./images/index2-li${index + 1}.jpg`)
    })

})